<template>
	<view :class="[primarySize()]">
		<view class="container">
			<view class="page-head">
				<hx-navbar ref="hxnb" :config="config"></hx-navbar>
			</view>
			<image :src="detailInfo.banner_image" mode="aspectFit" class="top_bg"></image>
			<view class="box">
				<view class="box-title">{{detailInfo.title}}</view>
				<!-- <view class="qiye">
					<view class="qiye-content1">
						<view>
							<view class="qiye-title-1">{{detailInfo.organizer}}</view>
							<view class="qiye-title-2">主办方</view>
						</view>
					</view>
					<view class="qiye-content2">
						<view>
							<view class="qiye-title-1">{{detailInfo.coorganizer}}</view>
							<view class="qiye-title-2">协办方</view>
						</view>
					</view>
				</view> -->
				<view class="way" style="border-top: 1rpx solid #EDEDED;">
					<image src="/static/public/zzzz.png" mode=""></image>
					<view class="way-title">
						<view>主办方：</view>
						<view class="who">
							{{detailInfo.organizer}}
						</view>
					</view>
				</view>
				<view class="way">
					<image src="/static/public/xxxx.png" mode=""></image>
					<view class="way-title">
						<view>协办方：</view>
						<view class="who">
							{{detailInfo.organizer}}
						</view>
					</view>
				</view>
				<view class="way">
					<image src="/static/public/way.png" mode=""></image>
					<view class="way-title">举办方式：{{detailInfo.way_text}}</view>
				</view>
				<view class="time">
					<view class="time-top">
						<image src="/static/public/time.png" mode=""></image>
						<view class="time-title">时间: {{detailInfo.starttime_text}}到{{detailInfo.endtime_text}}</view>
					</view>
					<view class="time-bottom">
						<view class="time-left">
							<image class="cicle" src="/static/public/cicle-1.png" mode=""></image>
							<view class="address">
								<view class="address-1">{{detailInfo.address}}</view>
								<!-- <view class="address-2">（广州市海珠区阅江中路380号）</view> -->
							</view>
						</view>
						<image @click="openMap" class="daohang" src="/static/public/daohang.png"></image>
						<image src="/static/public/map-1.png" class="map" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="detail">
			<view class="detail-1" style="justify-content: space-between;">
				<view style="display: flex;align-items: center;">
					<image src="/static/public/cicle-2.png" mode=""></image>
					<view class="baoming-title">部分已报名企业</view>
				</view>
				<view style="font-size: 24rpx;color: #8B8B8B;" @click="seeMore">查看更多</view>
			</view>
			<scroll-view v-if="list.length" class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
				<view class="scroll-view-item_H" v-for="item,index in list" :key="index">
					<image :src="item.logo_image" mode="aspectFill"></image>
					<image class="bg-dark" src="@/static/public/bggg.png" mode="widthFix"></image>
					<view class="scrll-title">
						<view class="name u-line-1">{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
			<view v-else class="scroll-view_H" style="font-size: 28rpx;color: #333333;">暂无推荐企业</view>
			<view class="detail-1" style="margin-top: 40rpx;">
				<image src="/static/public/cicle-2.png" mode=""></image>
				<view class="baoming-title">活动详情</view>
			</view>
			<view class="editor">
				<u-parse :content="detailInfo.detail_content"></u-parse>
			</view>
		</view>
		<view class="subtn">
			<view :class="detailInfo.is_apply==0?'dis':''" @click="goBaoming" class="baoming">企业报名</view>
		</view>
		<image src="/static/public/phone.png" @click="makePhone" v-if="detailInfo.tel" class="phone" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					color: '#000',
					back: true,
					title: '招聘会详情',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [0, ['#000', '#000']],
					slideBackgroundColor: [1, 'var(--primary)'],
					statusBarFontColor: ['#000000', '#000000']
				},
				detailInfo: {},
				list: []
			}
		},
		onLoad: function(options) {
			this.getDetail(options.id)
		},
		methods: {
			getDetail(id) {
				this.$core.get({
					url: 'xilujob.third/getRecruitmentDetail',
					data: {
						id
					},
					loading: true,
					success: ret => {
						this.detailInfo = ret.data.meeting
						this.detailInfo.endtime_text = uni.$u.timeFormat(this.detailInfo.endtime_text,
							'yyyy/mm/dd')
						this.detailInfo.starttime_text = uni.$u.timeFormat(this.detailInfo.starttime_text,
							'yyyy/mm/dd')
						this.list = ret.data.recommend_companies
					}
				});
			},
			makePhone() {
				uni.makePhoneCall({
					phoneNumber: this.detailInfo.tel
				});
			},
			openMap() {
				console.log(213);
				if (this.detailInfo.latitude && this.detailInfo.longitude) {
					uni.openLocation({
						latitude: +this.detailInfo.latitude,
						longitude: +this.detailInfo.longitude,
						success: function() {
							console.log('success');
						}
					});
				}
			},
			seeMore() {
				uni.navigateTo({
					url: '/pages/enterprise/enterprise_list?id=' + this.detailInfo.id
				})
			},
			qiyeDetail(item) {
				uni.navigateTo({
					url: '/pages/enterprise/enterprise_detail?id='
				})
			},
			goBaoming() {
				if (this.detailInfo.is_apply == 0) return
				uni.navigateTo({
					url: '/pages/enterprise/enterprise_registration?id=' + this.detailInfo.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: unset;
		padding-bottom: 12rpx;
	}

	.top_bg {
		width: 750rpx;
		height: 750rpx;

	}


	.box {
		padding: 40rpx;
		position: relative;
		z-index: 2;
		background: #fff;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		width: 100%;
		margin-top: -190rpx;
		min-height: 300rpx;

		.box-title {
			margin-top: 14rpx;
			margin-bottom: 38rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 700;
			font-size: 36rpx;
			color: #000000;
		}

		.qiye {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 42rpx;
			border-top: 1rpx solid #EDEDED;
			border-bottom: 1rpx solid #EDEDED;

			.qiye-content1 {
				width: 50%;
				border-right: 1rpx solid #EDEDED;
				text-align: left;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
			}

			.qiye-content2 {
				width: 50%;
				text-align: right;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: center;
			}

			.qiye-title-1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 700;
				font-size: 28rpx;
				color: #333333;
				text-align: center;

			}

			.qiye-title-2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #8B8B8B;
				text-align: center;
				padding-top: 6rpx;
			}
		}

		.way {
			display: flex;
			align-items: center;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #EDEDED;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.way-title {
				padding-left: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				flex: 1;
				display: flex;
				align-items: center;

				.who {
					flex: 1;
				}
			}
		}

		.time {
			padding-top: 24rpx;

			.time-top {
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.time-title {
					padding-left: 16rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
			}

			.time-bottom {
				margin-top: 32rpx;
				position: relative;
				width: 100%;
				height: 96rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				background: linear-gradient(90deg, #FBFBFB 0%, #FFFFFF 100%);
				display: flex;
				align-items: center;
				justify-content: space-between;

				.time-left {
					display: flex;
					align-items: center;
					flex: 1;
				}

				.cicle {
					width: 20rpx;
					height: 20rpx;
					margin-left: 30rpx;
					margin-right: 20rpx;
				}

				.address {
					flex: 1;

					.address-1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 700;
						font-size: 28rpx;
						color: #000000;
					}

					.address-2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #9CA2B5;
					}
				}

				.daohang {
					width: 48rpx;
					height: 48rpx;
					margin-right: 32rpx;
					position: relative;
					z-index: 33;
				}

				.map {
					position: absolute;
					width: 100%;
					height: 100%;
					right: 0;
					bottom: 0;
				}
			}
		}
	}

	.detail {
		padding-top: 40rpx;

		.detail-1 {
			padding: 0 32rpx;
			display: flex;
			align-items: center;

			image {
				width: 20rpx;
				height: 20rpx;
			}

			.baoming-title {
				margin-left: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 700;
				font-size: 32rpx;
				color: #000000;
			}
		}

		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			padding-left: 32rpx;
			margin-top: 32rpx;

			.scrll-title {
				position: absolute;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				bottom: 0;
				width: 100%;
				height: 48rpx;
				line-height: 48rpx;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);

				.name {
					text-align: center;
				}
			}

			.scroll-view-item_H {
				display: inline-block;
				width: 128rpx;
				height: 128rpx;
				border-radius: 16rpx;
				margin-right: 24px;
				overflow: hidden;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.editor {
			padding: 32rpx 16rpx 200rpx;
		}
	}

	.phone {
		position: fixed;
		right: 40rpx;
		width: 112rpx;
		height: 112rpx;
		bottom: 250rpx;
	}

	.subtn {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 174rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;

		.dis {
			background: #adadad !important;
		}

		.baoming {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: var(--primary);
			border-radius: 130rpx 130rpx 130rpx 130rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.bg-dark {
		width: 100%;
		height: 48rpx !important;
		position: absolute;
		bottom: 0;
		left: 0;
	}
</style>